<template>
    <div class="question-container">
        <h3 class="questionText">
            <span>{{ questionText }}</span>
            <span class="question-type">(填空题)</span>
            <span>
                <el-button
                    type="info"
                    size="mini"
                    @click="clickQuestion"
                    icon="el-icon-zoom-in"
                    plain="true"
                ></el-button>
            </span>
        </h3>

        <transition name="slide-fade">
            <div class="blockquote" v-if="showStandardAnswer">
                {{ standardAnswer }}
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        questionText: String,
        standardAnswer: String, // 标准答案
    },
    data() {
        return {
            showStandardAnswer: false,
        };
    },
    methods: {
        clickQuestion() {
            if (!this.showStandardAnswer) {
                this.showStandardAnswer = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../../assets/css/question-item.scss";
</style>
